{include file="public/header296"}
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form" lay-filter="layui-app-form" id="layui-app-form" style="padding: 10px 0 0 0;display:none;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限范围</label>
                <div class="layui-input-block">
                    <div id="test-tree-demo1"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-block">
                    <input type="text" name="desc" id="desc" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
            </div>
        </form>
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-list" data-type="insert">添加</button>
            </div>
            <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
            <script type="text/html" id="table-content-list">
                {{#  if(d.id == 1){ }}
                <a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon layui-icon-delete"></i>删除</a>
                {{#  } else { }}
                <a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
                {{#  } }}
            </script>
        </div>
    </div>
</div>
<script>
layui.use(['tree', 'table', 'form'], function(){
    var $ = layui.$
            , tree = layui.tree
            , table = layui.table
            , form = layui.form;
    // 搜索角色
    form.on('select(LAY-user-adminrole-type)', function(data){
        table.reload('LAY-app-content-list', {
            where: {
                role: data.value
            }
        });
    });
    table.render({
        elem: '#LAY-app-content-list'
        , url: "{:url('role/getRoleList')}"
        , request: {
            pageName: 'page',
            limitName: 'page_size'
        }
        , page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            ,first: '首页'
            ,last: '尾页'
            ,limit: 10
        }
        , toolbar: true
        , totalRow: true
        , cellMinWidth: 120
        , cols: [[
            {field: 'id', type: 'checkbox', fixed: 'left', title: '全选'}
            , {field: 'id', width: 80, title: 'ID', align: 'center'}
            , {field: 'name', title: '角色名', align:'center'}
            , {field: 'desc', title: '角色描述', align:'center'}
            , {field: 'status', title: "状态", align:'center', templet: function (d) {
                if (d.status == 1) {
                    return '<button class="layui-btn layui-btn-xs">正常</button>';
                } else{
                    return '<button class="layui-btn layui-btn-xs layui-btn-primary">禁用</button>';
                }
            }}
            , {field: 'update_time', title: '最后更新', minWidth: 150, align:'center'}
            , {title: '操作', align: 'center', fixed: 'right', toolbar: '#table-content-list'}
        ]]
        , text: {
            none: '暂无相关数据'
        }
    });
    //监听工具条
    table.on('tool(LAY-app-content-list)', function (obj) {
        var data = obj.data;
        var id = data.id;
        if (obj.event === 'edit') {
            layer.open({
                type: 2
                , title: '编辑'
                , content: "{:url('role/edit')}?id=" + data.id
                , maxmin: true
                , area: ['800px', '85%']
                ,btn: ['提交', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#Lay-app-form-edit");

                    iframeWindow.layui.form.on('submit(Lay-app-form-edit)', function(data){
                        var field = data.field;
                        // 获取子页面 tree属性
                        var checkedData = iframeWindow.layui.tree.getChecked('Lay-app-tree-nodes-edit');
                        node_ids = getCheckedId(checkedData);
                        if (node_ids == '') {
                            return layer.msg("请分配权限范围",{icon:5});
                        }
                        $.post("{:url('role/edit')}", {id:field.id, name:field.name, desc:field.desc, permission_ids:node_ids}, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload("LAY-app-content-list");
                            } else {
                                return layer.msg(res.msg, {icon: 5});
                            }
                        });
                        layer.close(index);
                    });
                    submit.trigger('click');
                }
            });
        } else if (obj.event === 'delete') {
            layer.confirm('确定删除该该角色吗，请谨慎操作？', {title : '温馨提示'}, function(index){
                $.ajax({
                    url:"{:url('role/delete')}",
                    type:'post',
                    data:{'id':id},
                    success: function(res){
                        if(res.code == 0){
                            obj.del();
                            layer.msg(res.msg,{icon:1});
                        } else {
                            layer.msg(res.msg,{icon:5});
                        }
                    }
                });
            });
        }
    });

    form.on('submit(LAY-app-contlist-search)', function (data) {
        var field = data.field;
        table.reload('LAY-app-content-list', {
            page: {
                curr: 1
            }
            , where: field
        });
    });

    //获取所有选中的节点id
    function getCheckedId(data) {
        var ids = "";
        $.each(data, function (index, item) {
            if (ids != "") {
                ids = ids + "," + item.id;
            } else {
                ids = item.id;
            }
            // item 含有 children属性
            if (item.children != null) {
                var i = getCheckedId(item.children);
                if (i != "") {
                    ids = ids + "," + i;
                }
            }
        });
        return ids;
    }

    var data = [];
    $.ajax({
        url: "{:url('systemMenu/getSystemMenu')}",
        type: "post",
        dataType: 'json',
        async: false,
        success: function (res) {
            data = res.data;
        },
    });
    tree.render({
        elem: '#test-tree-demo1'
        , data: data
        , id: 'Lay-app-tree-nodes'
        , showCheckbox: true
        , isJump: true
        , click: function(obj){
            // var data = obj.data;  //获取当前点击的节点数据
            // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
        }
    });

    var $ = layui.$, active = {
        insert: function(){
            /*layer.open({
                type: 2
                ,title: '添加角色'
                ,content: "{:url('role/insert')}"
                ,maxmin: true
                ,area: ['800px', '600px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

                    iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
                        var field = data.field;
                        alert(field);
                        console.log(field);
                        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                        console.log(checkedData);
                        var nodeIds = [];
                        nodeIds = getCheckedId(checkedData);
                        console.log(nodeIds);

                        $.ajax({
                            url:"{:url('role/insert')}",
                            type:'post',
                            data:{'field':field},
                            success:function(res){
                                if(res.code == 0){
                                    layer.msg(res.msg,{icon:1});
                                    table.reload('LAY-app-content-list');
                                } else{
                                    layer.msg(res.msg,{icon:5});
                                    return false;
                                }
                            }
                        });
                        layer.close(index);
                    });
                    submit.trigger('click');
                }
            });*/

            layer.open({
                type:1,
                skin: 'demo-class',
                area:['800px','85%'],
                title: "添加",
                content: $("#layui-app-form"),
                shade: 0,
                btn: ['确定', '取消'],
                yes: function(){
                    var checkedData = tree.getChecked('Lay-app-tree-nodes');
                    var node_ids;
                    node_ids = getCheckedId(checkedData);
                    var name = $('#name').val();
                    var desc = $('#desc').val();
                    if (node_ids == '') {
                        return layer.msg("请分配权限范围",{icon:5});
                    }
                    $.post("{:url('role/insert')}", {name:name, desc:desc, permission_ids:node_ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            $("#layui-app-form")[0].reset();
                            table.reload("LAY-app-content-list");
                            layer.closeAll();
                        } else {
                            return layer.msg(res.msg, {icon: 5});
                        }
                    });
                },
                btn2: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                },
                cancel: function(){
                    $("#layui-app-form")[0].reset();
                    layer.closeAll();
                }
            });
        }
    };

    $('.layui-btn.layuiadmin-btn-list').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
</script>
{include file="public/footer"}


